import { defineComponent } from 'vue';
import { getKpi, historyScore, scoreDetail } from '@/api/home';
import SheltV2 from '../../common/SheltV2';
import Echarts from '@/components/Echarts';
import Detail from '../Detail';
import { ActionSheet } from 'vant';
import './index.less';

export default defineComponent({
  name: 'Mykpi',
  setup() {
    const detailRef = ref();
    // const detailTitle = ref('绩效详情');
    const datas = ref({}) as AnyObject;
    const detailInfo = reactive({
      title: '',
      show: false,
      list: [],
      sum: {}
    }) as AnyObject;
    const filterDetail = reactive({
      search: {
        year: undefined
      },
      list: [
        {
          key: 'year',
          type: 'popup_year',
          title: '日期选择',
          placeholder: '请选择'
        }
      ]
    }) as AnyObject;
    const tableDetail = [
      { title: '考核月份', key: 'date' },
      { title: '等级', key: 'performance_grade' },
      { title: '得分', key: 'performance_score' }
    ];

    const option = ref({
      tooltip: {
        trigger: 'item'
      },
      color: ['#ffc824', '#4a74ea', '#38d6a1', '#fc8844', '#ffb17d'],
      legend: {
        orient: 'vertical',
        left: '60%',
        y: 'center',
        icon: 'circle',
        itemWidth: 10,

        textStyle: {
          rich: {
            a: {
              fontSize: 18,
              color: '#333333',
              fontWeight: 'bold',
              padding: [0, 0, 0, 5]
            }
          }
        }
      },
      series: [
        {
          name: '我的绩效',
          type: 'pie',
          radius: ['63%', '90%'],
          avoidLabelOverlap: false,
          center: ['23%', 'center'],
          // roseType: 'radius',
          itemStyle: {
            borderRadius: 2
          },
          label: {
            show: false,
            formatter: '{a|{c}}\n\r{b|{b}}',
            rich: {
              a: {
                fontSize: '24px',
                color: '#333333',
                fontWeight: 'bold'
              },
              b: {
                fontSize: '12px',
                color: '#666666'
              }
            }
          },

          labelLine: {
            show: true,
            length: 5
          },

          data: datas.value.list
        }
      ]
    }) as any;

    getKpi().then((res) => {
      option.value.series[0].data = res.data.list;
      option.value.legend.formatter = (name: string) => {
        const findItem = datas.value.list?.find(
          (_item: AnyObject) => _item.name === name
        );
        return name + `{a|${findItem?.value || ''}}`;
      };
      datas.value = res.data;
    });

    const viewDetail = () => {
      detailRef.value.show = true;
    };
    const detailTitle = computed(() => {
      return (filterDetail.search.year || '') + '绩效详情';
    });
    const viewLiDetail = (val: AnyObject) => {
      detailInfo.title = val.date + '绩效详情';
      detailInfo.list=[];
      detailInfo.show = true;
      scoreDetail(val.id).then((res: AnyObject) => {
        let start = 0;
        let end = 0;
        console.log(res.data);

        res.data.list.forEach((item: AnyObject, index: number, arr: any[]) => {
          if (item.name == '岗位职责') {
            !start && (start =end= index);
            end++;
          } else {
            if (end) {
              console.log(start,end);
              
              detailInfo.list.push({
                title: '岗位职责',
                list: arr.slice(start, end)
              });
              end = 0;
            }
            detailInfo.list.push({ title: item.name, list: [item] });
          }
        });
        detailInfo.sum = res.data.sum;
      });
    };

    return () => (
      <>
        <SheltV2
          title="我的绩效"
          more="查看全部"
          onViewDetail={viewDetail}
          question="<div><p>【该数据每日02:00更新一次】</p><p>我的绩效数据来源于钉钉宜搭，统计个人过往的绩效数据。</p></div>"
        >
          <Echarts option={option.value} />
        </SheltV2>
        <Detail
          title={detailTitle.value}
          ref={detailRef}
          filterDetail={filterDetail}
          tableDetail={tableDetail}
          requestApi={historyScore}
          onViewLiDetail={viewLiDetail}
        />
        <ActionSheet
          v-model:show={detailInfo.show}
          title={detailInfo.title}
          class="detailinfo"
        >
          <ul class="detailinfo_kpi">
            {detailInfo.list.map((item: AnyObject) => (
              <li class="kpi_item">
                <div class="title">{item.title}</div>
                {item.list.map((_item: AnyObject) => (
                  <ul class="content">
                    <li>
                      <div>{_item.project_name}</div>
                      <div>
                        <div>{_item.score}</div>
                        <p>占比</p>
                      </div>
                      <div>
                        <div>{_item.total_score}</div>
                        <p>得分</p>
                      </div>
                    </li>
                  </ul>
                ))}
              </li>
            ))}
            <li class="kpi_item">
              <div class="title">评分合计</div>
              <ul class="content sum flex-between">
                <p>
                  <span>评分合计</span>
                  <span>{detailInfo.sum.total}</span>
                </p>
                <p>
                  <span>绩效</span>
                  <span>{detailInfo.sum.performance}</span>
                </p>
              </ul>
            </li>
          </ul>
        </ActionSheet>
      </>
    );
  }
});
